<template>
  <el-row>
    <el-col :span="24/itemCfg.length" v-for="(item , index) in itemCfg" :key="index"  >
      <el-form-item :label="item.label" :prop="item.name" v-if="item.name && item.type==='input'" >
        <el-input v-model="queryData[item.name] " :placeholder="item.placeholder" show-word-limit :style="itemWidth"></el-input>
      </el-form-item>
      <el-form-item   :label="item.label" :prop="item.name"  v-if="item.name &&  item.type==='cascader'" >
        <el-cascader  :placeholder="item.label" :options="item.other.treeData" :props="item.other.cascadeProps"  :show-all-levels="false"v-model="queryData[item.name] " clearable  ref="cascader"  :style="itemWidth"></el-cascader>
      </el-form-item>
      <el-form-item :label="item.label" :prop="item.name" v-if="item.name && item.type==='select'">
        <el-select v-model="queryData[item.name] " :placeholder="item.placeholder" :style="itemWidth">
          <el-option v-for="a in item.other.selectData" :key="a.value" :label="a.label" :value="a.value" />
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
	export default {
		name:'FormItem',
		props:['itemCfg','queryData','widthRevision'],
		methods: {
		},
    data(){
		  return{
        itemWidth:'',
        treeData: [],
        cascadeProps:{
          value: "departmentId",
          label: "name",
          children: "children",
          emitPath:false,
          checkStrictly: true
        },
      }
    },
    mounted() {
      console.log(this.queryData)
		  let num=this.itemCfg.length
      let revision=this.widthRevision || 200
      this.itemWidth='width:'+((this.$store.state.routerViewWidth-40)/6*5/num-revision)+'px';
    },

  }
</script>

<style scoped>

</style>
